<template>
  <ion-page>
    <div class="modal">
      <!-- <ion-button @click="newalertData=true">Click Me</ion-button> -->
        <ion-alert
        is-open="newalertData==true"
        :header="alertData.triggerName"
        :sub-header="alertData.triggerTelescopeName"
        :message=[alertData.triggerTypeName,alertData.triggerTime]
        :buttons="alertButtons"     
        >
      </ion-alert> 
    </div>
  </ion-page>
</template>
   
  <script setup>
  import {  onMounted,ref,onUnmounted} from 'vue';
  import { IonAlert ,IonPage} from '@ionic/vue';
  import service from '@/api/api';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  
  const alertButtons = [
    {
      text: 'Cancel',
      role: 'cancel',
      handler: () => {
        console.log('Alert canceled');
      },
    },
    {
      text: 'Enter',
      role: 'confirm',
      handler: () => {
        goToDetail(alertData.value.triggerName)
        console.log('Alert confirmed');
      },
    },
  ];
  const goToDetail = (triggerName) => {
      router.push({
      name: 'eventdetails',
      params: { triggerName }, 
    });
  };
  const newalertData=ref(false)
  const alertData=[{
  triggerTelescopeName:'',
  triggerTypeName:'',
  triggerName: '',
  triggerTime: '',
  id:''}]   
onMounted(() => {
  const intervalId = setInterval(async () => {
    try {
      const response = await service.post('/alertApi/getAlerts',{length:'1'});
       if (response.data) {
        newalertData.value = true;
        alertData.value = response.data.data.list[0];        
        console.log(response.data);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }, 60000);

  // 清理轮询
  onUnmounted(() => {
    clearInterval(intervalId);
  });
});

  </script>